<style>
.reg_container{
	width:630px;
	margin:0 auto;
	border:2px solid #DDDDDD;
	border-radius:10px;
	background:#F3F8FF;
	padding:10px;
}
.float_f{
	float:left;
	font-size:16px;
	font-weight:bold;
	color:#0099FF;
}
.float_r{
	float:right;
	font-size:12px;	
	color:#FF7404;
}
.float_r a{
	color:#FF7404;
	text-decoration:none;
}
.join_f{
	padding:5px;
}
input[type=button]{
	background:#0099FF;
	color:white;
	padding-left:15px;
	padding-right:15px;
	padding-top:3px;
	padding-bottom:3px;
	border:2px solid #0099FF;
	border-radius:5px;
	font-weight:bold;
}
input[type=button]:hover{
	background:#1089EA;
}
input[type=text]{
	border:2px solid #DDDDDD;
	width:200px;
	padding:5px;
}
select{
	border:2px solid #DDDDDD;
	width:200px;
	padding:5px;
}
option{
width:180px;
}
</style>
<div class="reg_container"> 
<div class="float_f">Try Now for FREE</div><br/><div class="clearfix"></div>
<div class="float_r"><a href="javascript:void(0)">Why Register?</a></div><br/><div class="clearfix"></div>

<form id="registerNew" name="registerNew"  action="" method="POST" >
	<table cellpadding="10" style="padding:5px;">
		<tr>
			<td>Full Name</td>
			<td><input  type="text" name="name" placeholder="Full Name" id="name"  />&nbsp;&nbsp;&nbsp;<span style="color:red" id="errorusername"></span></td>
		</tr>
		<tr>
			<td>Email ID</td>
			<td><input  type="text" name="emailId" id="emailId" placeholder="Email ID" />
			&nbsp;&nbsp;&nbsp;<span style="color:red" id="erroremail1"></span>
			<span style="color:green" id="erroremail2"></span>
			<span style="color:red" id="erroremail"></span></td>
		</tr>
		<tr>
			<!--<span>
				<label>Country</label>
				<select name="country" id="country">
					<option value="">Select Country</option>
					<?//if(count($this->country)!=0){
						//foreach($this->country as $country){ ?>
						<option value="<?//echo $country->country_id?>"><?//echo $country->country_name?></option>
						<?//}
					//}?>
				</select>&nbsp;&nbsp;&nbsp;<span style="color:red" id="errorcountry"></span>
			</span>-->
			</tr>
			<tr>			
				<td>State</td>
				<td><select name="state" id="state">
					<option value="">Select state</option>
					<?if(count($this->states)!=0){
					foreach($this->states as $states){ ?>
					<option value="<?echo $states->state_id?>"><?echo $states->state_name?></option>
					<?}}?>
				</select>&nbsp;&nbsp;&nbsp;<span style="color:red" id="errorstate"></span></td>
			</tr>
			<tr>
				<td>City</td>
				<td><select name="city" id="city">
					<option value="">Select city</option>
					<?if(count($this->cities)!=0){
						foreach($this->cities as $cities){ ?>
							<option value="<?echo $cities->city_id?>"><?echo $cities->city_name?></option>
					<?}}?>
				</select>&nbsp;&nbsp;&nbsp;<span style="color:red" id="errorcity"></span></td>
			</tr>
			<tr>
				<td>Mobile</td>
				<td><input   type="text" name="mobileNo" placeholder="Mobile" id="mobileNo"    />&nbsp;&nbsp;&nbsp;<span style="color:red" id="errormobileNo"></span></td>
			</tr>
			<tr>
				<td>Landline</td>
				<td><input   type="text" name="userLandLineNo" placeholder="STD-Landline" id="userLandLineNo"   />&nbsp;&nbsp;&nbsp;<span style="color:red" id="erroruserLandLineNo"></span></td>
			</tr>
		</table>
		<tr class="termslink">By clicking the 'Join' button you agree to <br><a href="#" target="_blank" >Terms & Conditions</a></tr>	
		<tr class="termslink" style="margin-top: -6px;">
			<p class="join_f">Already joined? <a id="registerNew_" href="/user/login" style="font-weight: none;">Login here</a>			
			<input type="button" value="Join" id="submit_button" name="submit_button" onclick="formSubmit()"/></p>
		</tr>	
		<span style="color:red" id="regAuthmail"></span>
</form>
</div>
<script type="text/javascript">
$('#emailId').focusout(function(e){
	var emailcheck=$('#emailId').val();
	if(checkEmail(emailcheck)==false)
	{
		$('#erroremail1').html('');
		$('#erroremail2').html('');
		$('#erroremail').html('*Email Format is not correct');
	}
	else{	
	$.ajax({
		type:'POST',
		url:   '/user/check-email',
		data:{email:emailcheck},
		success: function(data){ 
			if(data.output=='success'){
				$('#erroremail2').html('');
				$('#erroremail').html('');
				$('#erroremail1').html('*Already Email Exits');
			}else{
				$('#erroremail1').html('');
				$('#erroremail').html('')
				$('#erroremail2').html('*valid Email');
			}
		}
	});
	}
});
function formSubmit(){
	var flag=true;	
	if($('#name').val()==""){		
		$('#errorusername').html('*Full Name Required');
		flag=false;
	}else{
		$('#errorusername').html('');
	}	
	if($('#emailId').val()==""){
		$('#erroremail1').html('');
		$('#erroremail').html('*Email Required');
		flag=false;
	}else{
		$('#erroremail').html('');
	}
	if($('#userLandLineNo').val()==""){
		$('#erroruserLandLineNo').html('*LandLineNo Required');
		flag=false;
	}else{
		$('#erroruserLandLineNo').html('');
	}
	if($('#mobileNo').val()==""){
		$('#errormobileNo').html('*MobileNo Required');
		flag=false;
	}else{
		$('#errormobileNo').html('');
	}
	
	if($('#country').val()==""){
		$('#errorcountry').html('*Country Required');
		flag=false;
	}else{
		$('#errorcountry').html('');
	}
	
	if($('#state').val()==""){
		$('#errorstate').html('*state Required');
		flag=false;
	}else{
		$('#errorstate').html('');
	}
	if($('#city').val()==""){
		$('#errorcity').html('*city Required');
		flag=false;
	}else{
		$('#errorcity').html('');
	}
	
	if(flag==false){ 
		return false;
	}else{
		$('#loadding').show();	
		$.ajax({
			type:	'POST',
			url:   	'/user/register',
			data:	$( "#registerNew" ).serialize(),
			success: function(data){
				$('#loadding').hide();	
				if(data.output=='success'){
					$('#regAuthmail').html('Email Verification Link Sent To Your Email!.');	
				}else{
					$('#regAuthmail').html('Error In Sent Mail!');
				}
			}
		});
	}	
}
	
function checkEmail(emailStr) {
	if (emailStr.length == 0) {
		return true;
	}
	var emailPat=/^(.+)@(.+)$/;
	var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";
	var validChars="\[^\\s" + specialChars + "\]";
	var quotedUser="(\"[^\"]*\")";
	var ipDomainPat=/^(\d{1,3})[.](\d{1,3})[.](\d{1,3})[.](\d{1,3})$/;
	var atom=validChars + "+";
	var word="(" + atom + "|" + quotedUser + ")";
	var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
	var domainPat=new RegExp("^" + atom + "(\\." + atom + ")*$");
	var matchArray=emailStr.match(emailPat);
	if (matchArray == null) {
		return false;
	}
	var user=matchArray[1];
	var domain=matchArray[2];
	if (user.match(userPat) == null) {
		return false;
	}
	var IPArray = domain.match(ipDomainPat);
	if (IPArray != null) {
		for (var i = 1; i <= 4; i++) {
			if (IPArray[i] > 255) {
				return false;
			}
		}
		return true;
	}
	var domainArray=domain.match(domainPat);
	if (domainArray == null) {
		return false;
	}
	var atomPat=new RegExp(atom,"g");
	var domArr=domain.match(atomPat);
	var len=domArr.length;
	if ((domArr[domArr.length-1].length < 2) ||(domArr[domArr.length-1].length > 3)) {
		return false;
	}
	if (len < 2) {
		return false;
	}
	return true;
}
function getcity(){	
	var stateid=$('#state').val();
	$.ajax({
		type:'POST',
		url:'/user/statesoncities',
		data:{stateid:stateid},
		success: function(data){
			
		}
	});
}

</script>
